<?php
include("config.php");
$errors = [];

if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['submit'])) {

    $book_name = trim($_POST["name"]);
    $price = trim($_POST["price"]);
    $uploadtime = trim($_POST["uploadtime"]);
    $type = trim($_POST["type"]);
    $total = trim($_POST["total"]);

    if (empty($book_name)) {
        $errors[] = "书名不能为空";
    }
    if (!is_numeric($price) || $price <= 0) {
        $errors[] = "价格必须是有效的正数";
    }
    if (empty($uploadtime) || !strtotime($uploadtime)) {
        $errors[] = "请输入有效的日期时间";
    }
    if (empty($type)) {
        $errors[] = "请输入书籍类别";
    }
    if (!is_numeric($total) || $total <= 0 || $total != round($total)) {
        $errors[] = "入库总量必须是正整数";
    }

    if (empty($errors)) {
        // 防止SQL注入，使用预处理语句
        $stmt = mysqli_prepare($connect, "INSERT INTO info_book (name, price, uploadtime, type, total, leave_number) VALUES (?, ?, ?, ?, ?, ?)");
        mysqli_stmt_bind_param($stmt, "sdssii", $book_name, $price, $uploadtime, $type, $total, $total);
        
        if (mysqli_stmt_execute($stmt)) {
            echo "<script>alert('添加成功！');window.location.href='add_book.php';</script>";
            exit;
        } else {
            $errors[] = "数据库错误: " . mysqli_stmt_error($stmt);
        }
        mysqli_stmt_close($stmt);
    }
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统 - 新书入库</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981',
                        accent: '#8b5cf6',
                        danger: '#ef4444',
                        warning: '#f59e0b',
                        info: '#06b6d4',
                        light: '#f8fafc',
                        dark: '#1e293b'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .hover-lift {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .hover-lift:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition duration-200;
            }
            .btn-effect {
                @apply transform hover:scale-105 active:scale-95 transition duration-200;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="p-6 border-b border-gray-200">
                <h2 class="text-xl font-bold text-gray-800 flex items-center">
                    <i class="fa fa-plus-circle text-primary mr-2"></i>新书入库
                </h2>
            </div>
            <div class="p-6 md:p-8">
                <div class="flex flex-col lg:flex-row gap-8">
                    <div class="w-full lg:w-2/3">
                        <?php if (!empty($errors)): ?>
                            <div class="bg-red-50 border-l-4 border-red-400 p-4 mb-6 rounded">
                                <div class="flex">
                                    <div class="flex-shrink-0">
                                        <i class="fa fa-exclamation-circle text-red-500"></i>
                                    </div>
                                    <div class="ml-3">
                                        <h3 class="text-sm font-medium text-red-800">请修正以下错误</h3>
                                        <div class="mt-2 text-sm text-red-700 space-y-1">
                                            <?php foreach ($errors as $error): ?>
                                                <p><?php echo $error; ?></p>
                                            <?php endforeach; ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endif; ?>   
                        <form name="bookForm" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" class="space-y-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">书名</label>
                                    <div class="relative">
                                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                            <i class="fa fa-book text-gray-400"></i>
                                        </div>
                                        <input type="text" id="name" name="name" required placeholder="请输入书名" 
                                            value="<?php echo isset($book_name) ? htmlspecialchars($book_name) : ''; ?>"
                                            class="pl-10 block w-full rounded-md border-gray-300 shadow-sm input-focus py-2.5">
                                    </div>
                                </div>
                                
                                <div>
                                    <label for="price" class="block text-sm font-medium text-gray-700 mb-1">价格</label>
                                    <div class="relative">
                                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                            <i class="fa fa-cny text-gray-400"></i>
                                        </div>
                                        <input type="number" id="price" name="price" step="0.01" min="0.01" required 
                                            placeholder="请输入价格" value="<?php echo isset($price) ? htmlspecialchars($price) : ''; ?>"
                                            class="pl-10 block w-full rounded-md border-gray-300 shadow-sm input-focus py-2.5">
                                    </div>
                                </div>
                                
                                <div>
                                    <label for="uploadtime" class="block text-sm font-medium text-gray-700 mb-1">入库日期</label>
                                    <div class="relative">
                                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                            <i class="fa fa-calendar text-gray-400"></i>
                                        </div>
                                        <input type="datetime-local" id="uploadtime" name="uploadtime" required 
                                            value="<?php echo isset($uploadtime) ? date('Y-m-d\TH:i', strtotime($uploadtime)) : date('Y-m-d\TH:i'); ?>"
                                            class="pl-10 block w-full rounded-md border-gray-300 shadow-sm input-focus py-2.5">
                                    </div>
                                </div>
                                
                                <div>
                                    <label for="type" class="block text-sm font-medium text-gray-700 mb-1">所属类别</label>
                                    <div class="relative">
                                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                            <i class="fa fa-tags text-gray-400"></i>
                                        </div>
                                        <input type="text" id="type" name="type" required placeholder="请输入书籍类别" 
                                            value="<?php echo isset($type) ? htmlspecialchars($type) : ''; ?>"
                                            class="pl-10 block w-full rounded-md border-gray-300 shadow-sm input-focus py-2.5">
                                    </div>
                                </div>
                                
                                <div class="md:col-span-2">
                                    <label for="total" class="block text-sm font-medium text-gray-700 mb-1">入库总量</label>
                                    <div class="relative">
                                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                            <i class="fa fa-cubes text-gray-400"></i>
                                        </div>
                                        <input type="number" id="total" name="total" min="1" required placeholder="请输入入库数量" 
                                            value="<?php echo isset($total) ? htmlspecialchars($total) : ''; ?>"
                                            class="pl-10 block w-full rounded-md border-gray-300 shadow-sm input-focus py-2.5">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex justify-end space-x-4 pt-4 border-t border-gray-100">
                                <button type="reset" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 btn-effect">
                                    <i class="fa fa-refresh mr-1"></i> 重置
                                </button>
                                <button type="submit" name="submit" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 btn-effect">
                                    <i class="fa fa-check mr-1"></i> 提交入库
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="w-full lg:w-1/3 space-y-6">
                        <div class="bg-blue-50 border border-blue-100 rounded-lg p-5 hover-lift">
                            <h3 class="text-lg font-semibold text-blue-800 mb-3 flex items-center">
                                <i class="fa fa-info-circle mr-2"></i>入库指南
                            </h3>
                            <ul class="space-y-2 text-sm text-blue-700">
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle text-blue-500 mt-1 mr-2"></i>
                                    <span>请确保填写的信息准确无误</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle text-blue-500 mt-1 mr-2"></i>
                                    <span>入库后将无法修改书籍的基本信息</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle text-blue-500 mt-1 mr-2"></i>
                                    <span>入库总量必须为正整数</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fa fa-check-circle text-blue-500 mt-1 mr-2"></i>
                                    <span>价格请精确到小数点后两位</span>
                                </li>
                            </ul>
                        </div>
                        <div class="bg-purple-50 border border-purple-100 rounded-lg p-5 hover-lift">
                            <h3 class="text-lg font-semibold text-purple-800 mb-3 flex items-center">
                                <i class="fa fa-tags mr-2"></i>类别参考
                            </h3>
                            <div class="grid grid-cols-2 gap-2">
                                <span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">文学</span>
                                <span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">科技</span>
                                <span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">计算机</span>
                                <span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">历史</span>
                                <span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">经济</span>
                                <span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">哲学</span>
                                <span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">医学</span>
                                <span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm rounded-full">教育</span>
                            </div>
                        </div>
                        <div class="bg-white border border-gray-200 rounded-lg p-5 hover-lift">
                            <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                                <i class="fa fa-bar-chart mr-2"></i>入库统计
                            </h3>
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-sm text-gray-500">本月入库</p>
                                        <p class="text-xl font-bold text-gray-800 mt-1">128 本</p>
                                    </div>
                                    <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center">
                                        <i class="fa fa-calendar text-blue-500 text-xl"></i>
                                    </div>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-sm text-gray-500">本周入库</p>
                                        <p class="text-xl font-bold text-gray-800 mt-1">32 本</p>
                                    </div>
                                    <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center">
                                        <i class="fa fa-clock-o text-green-500 text-xl"></i>
                                    </div>
                                </div>
                                
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-sm text-gray-500">今日入库</p>
                                        <p class="text-xl font-bold text-gray-800 mt-1">5 本</p>
                                    </div>
                                    <div class="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center">
                                        <i class="fa fa-today text-yellow-500 text-xl"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-6 border-t border-gray-200 bg-gray-50">
                <h3 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
                    <i class="fa fa-history text-primary mr-2"></i>最近入库记录
                </h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-100">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">书名</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">类别</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">入库日期</th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-8 w-8 bg-blue-100 rounded-md flex items-center justify-center">
                                            <i class="fa fa-book text-blue-500"></i>
                                        </div>
                                        <div class="ml-3">
                                            <div class="text-sm font-medium text-gray-900">Python数据分析实战</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">计算机</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-05-28</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">20</td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-8 w-8 bg-green-100 rounded-md flex items-center justify-center">
                                            <i class="fa fa-book text-green-500"></i>
                                        </div>
                                        <div class="ml-3">
                                            <div class="text-sm font-medium text-gray-900">人类简史</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">历史</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-05-27</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">15</td>
                            </tr>
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-8 w-8 bg-purple-100 rounded-md flex items-center justify-center">
                                            <i class="fa fa-book text-purple-500"></i>
                                        </div>
                                        <div class="ml-3">
                                            <div class="text-sm font-medium text-gray-900">活着</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">文学</span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-05-26</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">30</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <footer class="mt-12 py-6 border-t border-gray-200">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <div class="flex items-center space-x-2">
                        <i class="fa fa-book text-primary text-xl"></i>
                        <span class="font-bold text-lg">图书管理系统</span>
                    </div>
                    <p class="text-gray-500 mt-1 text-sm">智能、高效的图书馆管理解决方案</p>
                </div>
                <div class="text-gray-500 text-sm">
                    &copy; 2025 图书管理系统. 保留所有权利.
                </div>
            </div>
        </div>
    </footer>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const inputs = document.querySelectorAll('input');
            inputs.forEach(input => {
                if (input.value.trim() !== '') {
                    input.classList.add('border-primary');
                }
                
                input.addEventListener('focus', function() {
                    this.classList.add('border-primary');
                });
                
                input.addEventListener('blur', function() {
                    if (this.value.trim() === '') {
                        this.classList.remove('border-primary');
                    }
                });
            });
        });
    </script>
</body>
</html>